<!-- templates/document_upload.html -->
{% extends "base.html" %}

{% block title %}文档上传{% endblock %}

{% block content %}
<form id="upload-form" action="/uploadfile" method="post" enctype="multipart/form-data">
    <div class="col-auto mb-3">
        <label for="formFileLg" class="form-label">支持PDF/Doc/Docx格式，单文档最大限制100MB或1000页</label>
        <input class="form-control form-control-lg" id="formFileLg" type="file" name="file">
    </div>
    <div class="col-auto mb-3">
        <label for="knowledgeBaseName" class="form-label">输入知识库名称（不超过20字符）</label>
        <input class="form-control" id="knowledgeBaseName" type="text" name="knowledge_base_name" maxlength="20" required>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">上传文件</button>
    </div>
</form>
<div id="loading" class="loading" style="display: none;">
    <p>正在解析文档并构建知识库，请稍候...</p>
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<div class="mt-3" id="result"></div>
{% endblock %}

{% block scripts %}
<script>
    const form = document.getElementById('upload-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
       // 获取文件输入元素
        const fileInput = document.getElementById('formFileLg');
        const file = fileInput.files[0];

        // 检查文件是否已选择
        if (!file) {
            document.getElementById('result').innerHTML = `<div class="alert alert-danger" role="alert">请选择文件</div>`;
            return;
        }
        const formData = new FormData(form);
        document.getElementById('loading').style.display = 'block';
        document.getElementById('result').innerHTML = ''; // 清除之前的结果或错误信息
        fetch('/uploadfile', {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())  // 假设服务器返回JSON格式的响应
        .then(data => {
            document.getElementById('loading').style.display = 'none';
            if (data.detail) {
                // 如果有错误，显示错误信息
                document.getElementById('result').innerHTML = `<div class="alert alert-danger" role="alert">${data.detail}</div>`;
            } else {
                // 显示处理后的文档信息和层级结构
                const parsedResult = data.parsed_result;
                const docInfoHtml = `
                    <h2>文档信息</h2>
                    <div class="info-container">
                        <div class="info-item"><strong>文档类型：</strong>${parsedResult.docInfo.docType}</div>
                        <div class="info-item"><strong>段落数量：</strong>${parsedResult.docInfo.paragraphCount}</div>
                        <div class="info-item"><strong>页数估计：</strong>${parsedResult.docInfo.pageCountEstimate}</div>
                        <div class="info-item"><strong>图片数量：</strong>${parsedResult.docInfo.imageCount}</div>
                        <div class="info-item"><strong>表格数量：</strong>${parsedResult.docInfo.tableCount}</div>
                    </div>
                    <h2>文档摘要</h2>
                    <div class="alert alert-success" role="alert">${data.abstract}</div>
                    <h2>文档结构</h2>
                `;

                const hierarchyHtml = parsedResult.hierarchyHTML;
                document.getElementById('result').innerHTML = docInfoHtml + hierarchyHtml;
            }
        })
        .catch(error => {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('result').innerHTML = `<div class="alert alert-danger" role="alert">文件上传失败: ${error}</div>`;
        });
    });
</script>
{% endblock %}
